<template>
  <div class="menu-wrapper">
    <el-form ref="couponForm" :model="form" label-width="100px">
      <el-form-item label="活动名称" prop="name" :rules="{ required: true, message: '请输入名称', trigger: 'blur' }">
        <el-col :span="12">
          <el-input style="width: 400px"  placeholder="例:满100减30" v-model="form.name"/>
        </el-col>
      </el-form-item>
      <el-form-item label="活动描述">
        <el-col :span="12">
          <el-input style="width: 400px" v-model="form.introduction"/>
        </el-col>
      </el-form-item>
      <el-form-item label="起止日期" v-if="form.mode==0" prop="endDate" :rules="{ required: true, message: '请选择起止日期', trigger: 'blur' }">
        <el-col :span="12">
          <el-date-picker
            style="width: 400px"
            v-model="form.endDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="适用场景" prop="scope" :rules="{ required: true, message: '请选择适用场景', trigger: 'blur' }">
              <el-select style="width: 200px" v-model="form.scope" placeholder="请选择">
                <el-option label="全场" value="0"/>
                <el-option label="店内" value="1"/>
                <el-option label="商城" value="2"/>
              </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-tabs>
        <!--tab1-->
        <el-tab-pane label="优惠信息">
          <el-row>
              <el-form-item label="活动产品">
                <el-col :span="12">
                  <el-select ref="productSelect" :rules="{ required: true, message: '请选择活动产品', trigger: 'blur' }" style="width: 400px" @change="changeProductCategorys" value-key="id" multiple  v-model="products" @focus="dialogShow()">
                    <el-option
                      v-for="item in products"
                      :label="item.name"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
          </el-row>
          <el-row>

              <el-form-item label="优惠方式" :rules="{ required: true, message: '请选择优惠方式', trigger: 'blur' }">
                <el-col :span="12">
                    <el-select style="width: 200px" v-model="form.type" placeholder="请选择" >
                      <el-option label="满减" value="0"/>
                      <el-option label="满折" value="1"/>
                      <!-- <el-option label="满赠" value="2"/> -->
                    </el-select>
                </el-col>
              </el-form-item>


          </el-row>
          <el-row>
            <el-col >
              <el-form-item label="使用门槛" prop="minimumPrice" v-if="form.targetType!=5"
                            :rules="{ required: true, message: '请输入使用门槛', trigger: 'blur' }">
                <el-col :span="12">
                  <el-input style="width: 200px" placeholder="消费满多少元可用" type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="form.minimumPrice"/>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">

            </el-col>
          </el-row>
          <el-row>
            <el-col  v-if="form.targetType!=5">
              <el-form-item :label="form.type==0?'满减金额':'折扣率(%)'" prop="amount" :rules="{ required: true, message: typeId =='0'?'请输入满减金额':'请输入折扣率', trigger: 'blur' }"
                            v-if="form.targetType!=5&&form.type!=2">
                <el-col :span="12">
                  <el-input type="number" style="width: 200px" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="form.amount"/>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>

        </el-tab-pane>
        <el-tab-pane label="投放">
          <el-row>
            <el-col :span="12">
              <el-form-item label="投放方式" prop="mode" :rules="{ required: true, message: '请选择投放方式', trigger: 'blur' }">
                <el-select style="width: 400px" v-model="form.mode" placeholder="请选择">
                  <el-option label="自由领取" value="0"/>
                  <el-option label="活动投放" value="1"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
              <el-form-item label="发行张数" prop="stock" :rules="{ required: true, message: '请输入发行张数', trigger: 'blur' }">
                <el-col :span="12">
                  <el-input style="width: 400px" type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="form.stock"/>
                </el-col>
              </el-form-item>
            <el-form-item :label="form.targetType==0||form.targetType==5?'月使用量':'每人限领'" prop="maxgiven" :rules="{ required: true, message: '请输入每人限领', trigger: 'blur' }" v-if="form.mode==0||form.targetType==5">
              <el-col :span="12">
              <el-input style="width: 400px" type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent placeholder="0表示不限张数" v-model="form.maxgiven"/>
              </el-col>
            </el-form-item>
        </el-tab-pane>
      </el-tabs>

      <el-form-item>
        <el-col :span="12">
          <el-button type="primary" :loading="clicked" @click="saveCoupon('couponForm')">
            &nbsp&nbsp&nbsp&nbsp完 成&nbsp&nbsp&nbsp&nbsp
          </el-button>
        </el-col>
      </el-form-item>
    </el-form>
    <el-dialog
      title="商品选择"
      :visible.sync="orderVisible"
      width="950px"
      style="z-index: 9999"
      v-el-drag-dialog
      :before-close="orderClose">
      <div style="position: relative;z-index:9999">
        <productTable ref="productList" @doubleClick="doubleClick" @orderClose="orderClose"  @addClick="addClick"></productTable>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
  .menu-wrapper {
      margin: 15px;
    }
  .dialog-button-slot{
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
</style>
<script>
  import productTable from '../../../components/ProductList/productList'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import {EventBus} from '@/api/eventBus'
  import utils from '../../../utils/utils.js'
  import {save} from '@/api/coupon'
  import {list as companyList} from '@/api/company'
  import {list as brandList} from '@/api/brand'
  import {list as productList} from '@/api/product'
  import {list as productCategoryList} from '@/api/productCategory'
  import {list as memberList} from '@/api/member'
  export default {
    name: 'coupon-add',
    directives: { elDragDialog },
    filters: {},
    components: {productTable},
    data() {
      return {
        orderVisible:false,
        clicked: false, // 按钮防双击
        form: {
          status:0,
          name: '',
          amount: 0,
          beginDate: '',
          endDate: '',
          introduction: '',
          productId: '',
          maxgiven: 1,
          targetType:4,
          targets:[],
          minimumPrice: 0,
          mode: '0',
          quantity: 1,
          scope: '',
          stock: 0,
          subType:0,
          type: ''
        },
        vips: [],
        products: [],
        isProduct: false,
        vipOptions: [{id: 0, name: 'vip1'}, {id: 1, name: 'vip2'}, {id: 2, name: 'vip3'}, {id: 3, name: 'vip4'}, {id: 4, name: 'vip5'}],
        typeId:0,
        dateTime:[],
        productAllOptions: [],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() + 86400000 < Date.now();
          }
        }
      }
    },
    created() {
    },
    methods: {
      addClick(data){
        var _this = this
        data.forEach(item=>{
          var goodsDetails = {
            id: item.goodsId,
            name: item.name,
            tabId:'1',
          };
          _this.products.push(goodsDetails)
        });
        console.log(_this.products)
      },
      doubleClick(val) {
        var goodsDetails = {
          id: val.goodsId,
          name: val.name,
          tabId:'1',
        };
        this.products.push(goodsDetails)
        console.log(this.products)
      },
      orderClose() {
        this.orderVisible = false;
      },
      dialogShow() {
        this.orderVisible=true
      },

      typeChange(id) {
        this.typeId = id;
        if (id === 2 || id === 3) {
          this.isProduct = true
        } else {
          this.isProduct = false
        }
      },
      saveCoupon(form) {
        console.log(this.products)
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            let newDate = this.form.endDate
            if(newDate.length >0){
              this.form.beginDate = newDate[0];
              this.form.endDate = newDate[1]
            }

            if (this.products.length>0){
              this.products.forEach((item)=>{
                let couponTarget={
                  productType:item.tabId,
                  targetId:item.id,
                  targetName:item.name,
                }
                this.form.targets.push(couponTarget)
              })
            } else {
              this.$message.error('请选择活动商品');
              return
            }

            if (this.vips.length>0){
              this.vips.forEach(item=>{
                let couponTarget={
                  productType:0,
                  targetId:item,
                  targetName:'',
                }
                if (item==0){
                  couponTarget.targetName='vip1'
                }else if (item==1){
                  couponTarget.targetName='vip2'
                }else if (item==2){
                  couponTarget.targetName='vip3'
                }else if (item==3){
                  couponTarget.targetName='vip4'
                } else if (item==4){
                  couponTarget.targetName='vip5'
                }
                this.form.targets.push(couponTarget)
              })
            }
            if (this.form.targetType==5){
                  this.form.type=3;
                  this.form.mode=1;
            }
            save(_this.form).then(response => {
              console.log(response)
              _this.clicked = false
              EventBus.$emit('commodity-add', response.data)
              _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
                _this.$router.push({
                  path: '/commodity/list'
                })
              })// 关闭当前tab回到列表
            }).catch(error => {
              _this.clicked = false

            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
